<template>
  <div class="remote">
    <h1>Remote A is {{ count }}</h1>
    <button @click="handleClick" class="btn">{{ text }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{
  text: string
}>()
const count = ref(0)

const handleClick = () => {
  count.value++
}
</script>

<style scoped>
.remote {
  display: flex;
  flex-direction: column;
}

.btn {
  padding: 12px 20px;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
}

.btn:hover {
  background-color: #2980b9;
  transform: translateY(-2px); /* 按钮悬停时的上升效果 */
}

.btn:active {
  background-color: #1f6d8c;
  transform: translateY(0); /* 按钮点击时的回弹效果 */
}
</style>
